<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0;
			}

			#allmap {
				width: 100%;
				height: 100%;
				overflow: hidden;
				z-index: 1;
			}
			.bix_box{
				width: 90%;
				height: 270px;
				background-color: #fff;
				border-radius: 10px;
				position: fixed;
				bottom: 3%;
				margin-left: 5%;
				z-index: 99999;
			}
			.bix_qian{
				font-size: 33px;
				font-weight: 600;
				text-align: center;
				margin-top: 20px;
			}
			.neitox{
				width: 316px;
				height: 100px;
				background-color: #F7F9FB;
				border-radius: 10px;
				margin: 0 auto;
				margin-top: 10px;
			}
			.bix_flx{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 5px;
			}
			.bixz_title{
				font-size: 14px;
				color: #999999;
				margin-left: 10px;
			}
			.quxiao{
				width: 150px;
				height: 45px;
				text-align: center;
				line-height: 45px;
				border: 0.5px solid #A0A0A0;
				border-radius: 5px;
				font-size: 14px;
			}
			.quxiao1{
				width: 150px;
				height: 45px;
				text-align: center;
				line-height: 45px;
				border: 0.5px solid #00A0E9;
				border-radius: 5px;
				font-size: 14px;
				color: #fff;
				background-color: #00A0E9;
				margin-left: 15px;
			}
		</style>
	</head>

	<body>
		<div id='allmap'></div>
		<div class="bix_box">
			<div class="bix_qian"><span style="font-size: 18px;">￥</span><span id="moeny">153.55</span>
			</div>
			<div style="font-size: 14px;color: #999999;text-align: center;">合计费用</div>
			<div class="neitox">
				<div class="bix_flx">
					<div class="bixz_title">订单车型</div>
					<div style="font-size: 14px;margin-right: 10px;" id="car">小型面包</div>
				</div>
				<div class="bix_flx">
					<div class="bixz_title">用车时间</div>
					<div style="font-size: 14px;margin-right: 10px;" id="time">立即用车</div>
				</div>
				<div class="bix_flx">
					<div class="bixz_title">搬运服务</div>
					<div style="font-size: 14px;margin-right: 10px;" id="fuwu">不需要搬运服务</div>
				</div>
			</div>
			
			<div style="display: flex;justify-content: center;align-items: center;margin-top: 15px;">
				<div class="quxiao" id="quxiao">取消订单</div>
				<div class="quxiao1" id="xiugai">修改订单</div>
			</div>
		</div>

	</body>


	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
	</script>
	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=VeNlX17jPLxeiO4BzoL5rb1nyULo4LA9"></script>
	<script type="text/javascript">
		
		document.addEventListener('UniAppJSBridgeReady', function() {
			 
			  var mood = plus.storage.getItem('orderMood');
			    mood = JSON.parse(mood)
				var dir = document.getElementById('moeny')
				dir.innerText = mood.totalAmount
				var car = document.getElementById('car')
				car.innerText  = mood.vehicleTypeSimpleName
				var time = document.getElementById('time')
				if( mood.shipmentTime){
					time.innerText  = mood.shipmentTime
				}else{
					time.innerText ='立即用车'
				}
				var fuwu = document.getElementById('fuwu')
				if( mood.moveHouse){
					fuwu.innerText  = '需要搬运服务'
				}else{
					fuwu.innerText ='不需要搬运服务'
				}
			
			
			
			var map = new BMapGL.Map("allmap"); // 创建地图实例
			// var point = new BMapGL.Point(106.55734639, 29.61560503); // 创建点坐标 
			map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			var point = new BMapGL.Point(116.404, 39.915); // 创建点坐标 
			map.setZoom(17)
			// 通过JavaScript的prototype属性继承于BMap.Control	
			let geolocation = new BMapGL.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				console.log(JSON.stringify(r))
				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					var mk = new BMapGL.Marker(r.point);
					map.addOverlay(mk);
					map.panTo(r.point);
				 point = new BMapGL.Point(r.point.lng, r.point.lat); // 创建点坐标 
				var circle = new BMapGL.Circle(point,    //中心点，这个点是marker的点
				    100,                    //半径，单位米
				    {    
				    fillColor:"blue",        //圆形填充颜色
				    fillOpacity: 0.2,        //填充透明度
				    strokeWeight: 1 ,
				    strokeColor:"blue",       //线条颜色，为了保证感觉无线条，和填充颜色一致即可
				    strokeOpacity: 0.2,        //线条透明度，为了保证感觉无线条，和填充颜色透明度一致即可
				    enableEditing:false
				});
					map.addOverlay(circle);
				} else {}
			});
			
			var quxiao = document.getElementById("quxiao");
			quxiao.addEventListener('click', function() {
				uni.postMessage({
					data: {
						cont: 1
					}
				});
			}, false)
			    
			var xiugai = document.getElementById("xiugai");
			xiugai.addEventListener('click', function() {
				uni.postMessage({
					data: {
						cont: 0
					}
				});
			}, false)
		});
	</script>

	<style>

	</style>

</html>